<script setup lang="ts">
// import { userApi } from "@/api/admin/user";
import {
  ElDialog,
  ElTree,
  ElButton,
  ElMessage,
  ElCard,
  // ElTable,
  // ElTableColumn,
  // ElForm,
  // ElFormItem,
} from "element-plus";
import { nextTick, ref } from "vue";

const isEditor = ref(false);
const visible = ref(false);

// 当前角色
const currentRole = ref<any>(null);

// 角色权限数量
const rolePermissionNum = ref<any>(0);

// 角色权限
const rolePermissionTable = ref<any>([]);

const treeRef = ref<any>(null);

class UserRoleForm {
  id = "";
  roles: string[] = [];
}

const userRoleForm = ref<any>([]);

const props = defineProps({
  roleData: {
    type: Array,
    default: [],
  },
  permissionMetaData: {
    type: Array,
    default: [],
  },
});

const emit = defineEmits(["update"]);

// 打开弹窗
const open = (user: any = null) => {
  if (!user) {
    return ElMessage.error("用户不存在");
  }
  // console.log(user);
  visible.value = true;
  userRoleForm.value = new UserRoleForm();

  nextTick(() => {
    const rolesKeys = user.roles.map((item: any) => item.id);
    treeRef.value.setCheckedKeys(rolesKeys);
    userRoleForm.value = user;
  });
};

const clearForm = () => {
  treeRef.value.setCheckedKeys([]);
  rolePermissionTable.value = [];
};

// 取消
const handleCancel = () => {
  clearForm();
  visible.value = false;
};

// 关闭弹窗
const handleClose = (deno: () => void) => {
  clearForm();
  deno();
};

// 提交
// const handleOk = async () => {
//   const roles = treeRef.value.getCheckedKeys();
//   userRoleForm.value.roles = roles;
//   const ret = await userApi.updateUserRole(userRoleForm.value);
//   if (ret.code === 200) {
//     handleCancel();
//     emit("update");
//     ElMessage.success("设置成功");
//   } else {
//     console.error(ret);
//     ElMessage.error(ret.data.msg);
//   }
// };

// 设置权限树结构
// const setRolePermissionTree = (rolePermission: any) => {
//   // 根权限
//   const rootPermission: any[] = [];

//   // 子权限
//   const childPermission: any[] = [];

//   // 过滤出角色的根权限
//   rolePermission.forEach((item: any) => {
//     if (item.value.includes(":")) {
//       childPermission.push(item);
//     } else {
//       rootPermission.push(item);
//     }
//   });

//   const permissionTree = rootPermission.map((item: any) => {
//     const filterChildPermission = childPermission.filter((ite: any) => {
//       return ite.value.includes(item.value);
//     });
//     return {
//       ...item,
//       children: filterChildPermission,
//     };
//   });
//   return permissionTree;
// };

// 设置角色权限
// const setRolePermission = (rolePermission: any) => {
//   // 过滤出当前角色的权限
//   const currentRolePermission = props.permissionMetaData.filter((item: any) => {
//     return rolePermission.some((permission: any) => {
//       return item.value === permission.value;
//     });
//   });
//   // console.log(props.permissionMetaData);
//   // 设置权限树结构
//   return setRolePermissionTree(currentRolePermission);
// };

const handleNodeClick = (node: any) => {
  currentRole.value = node.name;
  
  // rolePermissionTable.value = setRolePermission(node.permission);
  rolePermissionNum.value = rolePermissionTable.value.length;
};

const defaultProps = {
  label: "name",
};

// 暴露方法
defineExpose({
  open,
});
</script>

<template>
  <el-dialog
    :title="isEditor ? '修改' : '新增'"
    :before-close="handleClose"
    v-model="visible"
    width="800px"
  >
    <div class="userRoleForm">
      <div class="left">
        <ElCard>
          <el-tree
            @node-click="handleNodeClick"
            :highlight-current="true"
            ref="treeRef"
            style="max-width: 300px; min-width: 120px"
            :data="props.roleData"
            show-checkbox
            node-key="id"
            :props="defaultProps"
          />
        </ElCard>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <!-- <el-button type="primary" @click="handleOk">
          {{ isEditor ? "提交修改" : "添加" }}
        </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.userRoleForm {
  width: 100%;
  display: flex;
  .right {
    flex: 1;
    box-sizing: border-box;
    padding-left: 10px;
  }
}
</style>
